<!DOCTYPE html>
<html lang="zh-CN">

  <head>
    <meta charset="UTF-8" />
    <script>
      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
      document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')
    </script>
    <title></title>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background: #ffffff;
      }

      * {
        margin: 0;
        padding: 0;
      }

      button,
      input,
      input[type=button],
      input[type=reset],
      input[type=search],
      input[type=submit],
      select {
        outline: none;
        -webkit-tap-highlight-color: transparent;
        -webkit-appearance: none;
        font-family: inherit;
        border: none;
      }

      .hide {
        display: none;
      }

      .search-wrap {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        padding: 8px 60px 8px 15px;
        background-color: #fff;
        border-bottom: 1px solid #d3d3d3;
        z-index: 100;
      }

      .search-wrap.init-status {
        padding-right: 15px;
      }

      .search-wrap .search-bar {
        display: block;
        height: 30px;
        background-color: #ebebeb;
        padding-left: 10px;
        padding-right: 10px;
        color: #b4b4b4;
        font-size: 15px;
        line-height: 31px;
        border-radius: 5px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .search-wrap .cancel,
      .search-wrap .submit {
        position: absolute;
        top: 0;
        right: 0;
        width: 55px;
        height: 46px;
        line-height: 46px;
        text-align: center;
        font-size: 16px;
        color: #0079ff;
        background-color: #fff;
      }

      .search-wrap .clear-input {
        top: 11px;
        right: 60px;
        width: 34px;
        height: 26px;
        line-height: 26px;
        background: url() no-repeat center center;
        background-color: #ededed;
        background-size: 18px 18px;
        position: absolute;
        padding: 0;
        border: 0;
        font-size: 14px;
        border-radius: 4px;
        text-align: center;
        z-index: 2;
      }

      .search-wrap.init-status .cancel,
      .search-wrap.init-status .clear-input,
      .search-wrap.init-status .submit {
        display: none;
      }

      .search-wrap .search-bar .keyword {
        display: block;
        width: 100%;
        padding-top: 6px;
        padding-bottom: 6px;
        border: 0;
        font-size: 14px;
        line-height: 18px;
        background: 0 0;
      }

      .search-wrap.init-status .search-bar .keyword {
        text-align: left;
      }

      .search-wrap .search-bar .keyword::-webkit-input-placeholder {
        background: url();
        background-repeat: no-repeat;
        background-position: left center;
        background-size: 80px 16px;
        color: gray
      }

      .search-wrap.init-status .search-bar .keyword::-webkit-input-placeholder {
        background-position: center center;
      }

      .suggestion-wrap {
        position: absolute;
        top: 46px;
        bottom: 0;
        z-index: 7;
        width: 100%;
        background: #f6f6f6;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
      }

      .map-wrap {
        height: 220px;
        position: relative;
        top: 46px;
        width: 100%;
      }

      .list-wrap {
        width: 100%;
        position: absolute;
        background-color: #fff;
        z-index: 1;
        bottom: 0;
        left: 0;
        overflow: hidden;
        border-top: 1px solid #d3d3d3;
        overflow-y: scroll;
        padding-bottom: 0;
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
        -webkit-overflow-scrolling: touch;
      }

      .poi-list ul {
        list-style: none;
        width: 100%;
        text-align: left;
        padding: 0 0 65px;
      }

      .suggestion-wrap li,
      .active-pos,
      .poi-list li {
        position: relative;
        display: block;
        padding-left: 15px;
        border: none;
        height: 58px;
        padding-top: 6px;
        margin: 0;
      }

      .poi-list li * {
        pointer-events: none;
      }

      .poi-list li p,
      .active-pos div p {
        padding-bottom: 10px;
        border-bottom: 1px solid #d3d3d3;
      }

      .poi-title {
        font-size: 14px;
        line-height: 27px;
        color: #333;
        font-weight: 400;
        display: block;
        width: 92%;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }

      .poi-address {
        font-size: 12px;
        color: gray;
        height: 20px;
        line-height: 20px;
        margin: 0;
        width: 92%;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        display: block;
      }

      .poi-city,
      .poi-latlng {
        line-height: 22px;
        display: none;
      }

      .no-more-results,
      .no-results {
        color: gray;
        padding: 20px 0;
        line-height: 24px;
        text-align: center;
      }

      .no-more-results p,
      .no-results p {
        padding: 0;
        margin: 0;
      }

      .list-wrap i {
        width: 16px;
        height: 16px;
        display: none;
        background: url() no-repeat right center;
        background-size: 16px 16px;
        position: absolute;
        right: 15px;
        top: 50%;
        margin-top: -8px;
      }

      .list-wrap i.active {
        right: 30px;
        display: inline-block;
      }
    </style>
  </head>

  <body>
    <div class="search-wrap init-status">
      <div class="search-bar">
        <form name="poi-search" id="poiSearch" onsubmit="return false;">
          <input type="search" class="keyword" id="searchword" placeholder=" ">
          <button type="reset" class="clear-input hide"></button>
          <button type="submit" class="submit hide">搜索</button>
        </form>
        <a class="cancel">取消</a>
      </div>
    </div>
    <div class="suggestion-wrap hide">
      <div class="poi-list">
        <ul>

        </ul>
      </div>
      <div class="no-results hide">
        <p>对不起，没有搜索到相关数据！</p>
      </div>
      <div class="no-more-results hide">
        <p>亲，没有更多了~</p>
      </div>
    </div>
    <div id="map" class="map-wrap"></div>
    <div class="list-wrap">
      <div class="active-pos">

      </div>
      <div class="poi-list">
        <ul>

        </ul>
        <div class="no-results hide">
          <p>对不起，没有搜索到相关数据！</p>
        </div>
      </div>
    </div>
    <script>
      var loc;
      var serviceWebview;
      var back = function () {
        var webview = plus.webview.currentWebview()
        if (webview.__uniapp_statusbar_style === 'dark') {
          plus.navigator.setStatusBarStyle('dark')
        }
        webview.close('auto');
      };
      window.__chooseLocationConfirm__ = function () {
        if (!loc) {
          plus.nativeUI.alert('您尚未选择位置!');
          return;
        }
        serviceWebview.evalJS(
          'window.__chooseLocationCallback__&&__chooseLocationCallback__(' + JSON
            .stringify(
              loc) + ')');
        back();
      }
      var searchWrapElem = document.querySelector('.search-wrap');
      var searchWordElem = document.getElementById('searchword');
      var resetElem = document.querySelector('[type="reset"]');
      var cancelElem = document.querySelector('.cancel');

      var suggestionWrapElem = document.querySelector('.suggestion-wrap');
      var mapElem = document.getElementById('map');
      var listWrapElem = document.querySelector('.list-wrap');

      var suggestionPoiListElem = suggestionWrapElem.querySelector('.poi-list ul');
      var suggestionPoiNoResultsElem = suggestionWrapElem.querySelector('.no-results');
      var suggestionPoiNoMoreResultsElem = suggestionWrapElem.querySelector(
        '.no-more-results');

      var activePosElem = document.querySelector('.active-pos');
      var nearbyPoiListElem = listWrapElem.querySelector('.poi-list ul');
      var nearbyPoiNoResultsElem = listWrapElem.querySelector('.no-results');

      listWrapElem.style.top = mapElem.offsetHeight + 47 + 'px';


      var debounce = function (func, wait, immediate) {
        var timeout, result;
        return function () {
          var context = this,
            args = arguments,
            later, callNow;
          later = function () {
            timeout = null;
            if (!immediate) {
              result = func.apply(context, args);
            }
          };
          callNow = immediate && !timeout;
          clearTimeout(timeout);
          timeout = setTimeout(later, wait);
          if (callNow) {
            result = func.apply(context, args);
          }
          return result;
        };
      };


      // document.addEventListener('plusready', function() {});
      var plusReady = function (callback) {
        if (window.plus) {
          callback()
        } else {
          document.addEventListener('plusready', callback)
        }
      }
      var ZOOM = 13
      window.__chooseLocation__ = function (params) {
        if (params && params.keyword) {
          searchWordElem.value = params.keyword;
        }
        plusReady(function () {
          serviceWebview = plus.webview.getWebviewById('__W2A_CONTEXT_') ||
            plus.webview
              .getLaunchWebview();
          plus.key.addEventListener('backbutton', back);

          var nativeMarker = false;

          var nativeMap = new plus.maps.Map('map', {
            zoom: ZOOM
          });


          var centerPoint = false

          var reverseGeocode = debounce(function (point) {
            plus.maps.Map.reverseGeocode(point, {}, function (res) {
              activePosElem.innerHTML =
                '<div data-name="' + (res.address || '') +
                '" data-address="' + (res.address || '') +
                '" data-lat="' + res.coord.getLat() +
                '" data-lng="' + res.coord.getLng() +
                '"><h2 class="poi-title">地图位置</h2><p><span class="poi-address">' +
                (res.address ||
                  '') +
                '</span><span class="poi-latlng">' +
                res.coord
                  .getLat() +
                ',' + res.coord.getLng() +
                '</span><i></i></p></div>';
            }, function (err) {
              console.log(err);
            });
            searchNearbyPoi.poiSearchNearBy(searchWordElem.value || '', point, 1000);
          }, 10)


          nativeMap.getUserLocation(function (state, point) { //获取当前用户坐标
            if (state === 0) {
              nativeMarker = new plus.maps.Marker(point);
              nativeMarker.setIcon('__uniappmarker@3x.png');
              nativeMap.addOverlay(nativeMarker);
              //centerPoint = point;
              nativeMap.showUserLocation(true);
              if (plus.os.name !== 'Android') {
                nativeMap.setCenter(point);
              }
              // reverseGeocode(centerPoint);
            } else {
              console.log('获取用户坐标失败');
            }

          });



          nativeMap.onstatuschanged = function (evt) { //切换坐标中心
            // if (!centerPoint) {
            //   return;
            // }
            if (centerPoint && evt.center) {
              if (centerPoint.latitude === evt.center.latitude &&
                centerPoint.longitude === evt.center.longitude) {
                return;
              }
            }
            centerPoint = evt.center
            if (nativeMarker) {
              nativeMarker.setPoint(centerPoint);
            }
            reverseGeocode(centerPoint);
          };

          var searchPoi = new plus.maps.Search(nativeMap);
          var searchNearbyPoi = new plus.maps.Search(nativeMap);

          var showMap = function (centerPoint) {
            nativeMap.show();
            if (centerPoint) {
              if (nativeMarker) {
                nativeMarker.setPoint(centerPoint);
              }
              nativeMap.setCenter(centerPoint);
              //               setTimeout(function() {
              //                 nativeMap.setZoom(ZOOM);
              //               }, 150);
              // reverseGeocode(centerPoint);
            }
            searchWordElem.value = '';
            cancelElem.className = 'cancel hide';
            searchWrapElem.className = 'search-wrap init-status';
            suggestionWrapElem.className = 'suggestion-wrap hide';
            resetSuggestionPoiList();
          }

          var resetSuggestionPoiList = function () {
            suggestionPoiListElem.innerHTML = '';
            suggestionPoiNoResultsElem.className = 'no-results hide';
            suggestionPoiNoMoreResultsElem.className =
              'no-more-results hide';
          }

          var showSuggestionPoiList = function () {
            nativeMap.hide();
            resetSuggestionPoiList();
          }

          var showSuggestionPoiNoResults = function () {
            suggestionPoiListElem.innerHTML = '';
            suggestionPoiNoResultsElem.className = 'no-results';
            suggestionPoiNoMoreResultsElem.className =
              'no-more-results hide';
          }

          var renderPoiResults = function (poiList) {
            var html = [];
            for (var i = 0; i < poiList.length; i++) {
              var poi = poiList[i];
              if (poi.point) {
                html.push('<li data-name="' + (poi.name || '') +
                  '" data-address="' + (poi.address || '') +
                  '" data-lat="' + poi.point.getLat() +
                  '" data-lng="' + poi.point.getLng() +
                  '"><p><span class="poi-title">' + poi.name +
                  '</span><span class="poi-address">' + (poi.address ||
                    '') +
                  '</span><span class="poi-latlng">' + poi.point
                    .getLat() +
                  ',' + poi.point.getLng() +
                  '</span><span class="poi-city">' + poi.city +
                  '</span></p><i></i></li>');
              }
            }
            return html.join('');
          }
          var showNearbyPoiNoResults = function () {
            nearbyPoiListElem.innerHTML = '';
            nearbyPoiNoResultsElem.className = 'no-results';
          }
          var showNearbyPoiResults = function (poiList) {
            var html = renderPoiResults(poiList);
            if (html) {
              nearbyPoiListElem.innerHTML = html;
              nearbyPoiNoResultsElem.className = 'no-results hide';
            } else {
              showNearbyPoiNoResults();
            }
          }
          var showSuggestionPoiResults = function (poiList) {
            var html = renderPoiResults(poiList);
            if (html) {
              suggestionPoiListElem.innerHTML = html;
              suggestionPoiNoResultsElem.className =
                'no-results hide';
              suggestionPoiNoMoreResultsElem.className =
                'no-more-results';
            } else {
              showSuggestionPoiNoResults();
            }
          }

          searchPoi.onPoiSearchComplete = function (state, res) {
            if (state === 0) {
              if (res.poiList.length) {
                showSuggestionPoiResults(res.poiList);
              } else {
                showSuggestionPoiNoResults();
              }
            } else {
              showSuggestionPoiNoResults();
            }
          };

          searchNearbyPoi.onPoiSearchComplete = function (state, res) {
            if (state === 0) {
              if (res.poiList.length) {
                showNearbyPoiResults(res.poiList);
              } else {
                showNearbyPoiNoResults();
              }
            } else {
              showNearbyPoiNoResults();
            }
          };

          var getSuggestion = debounce(function (q) {
            if (q.trim()) {
              searchPoi.poiSearchNearBy(q, centerPoint, 50000)
            } else {
            }
          }, 10);

          suggestionPoiListElem.addEventListener('click', function (evt) {
            var target = evt.target;
            for (; target && target !== suggestionPoiListElem; target =
              target.parentNode) {
              if (target && target.tagName === 'LI') {
                var laglng = target.querySelector('.poi-latlng')
                  .innerText
                  .split(',');
                centerPoint = new plus.maps.Point(Number(laglng[1]), Number(laglng[0]));
                showMap(centerPoint);
                reverseGeocode(centerPoint);
                break;
              }
            }
          });

          searchWordElem.addEventListener('click', function () {
            searchWrapElem.className = 'search-wrap';
            suggestionWrapElem.className = 'suggestion-wrap';
            cancelElem.className = 'cancel';
            showSuggestionPoiList();
          });

          var oldHasValue = false;

          var setInputState = function (hasValue) {
            if (hasValue !== oldHasValue) {
              if (hasValue) {
                resetElem.className = 'clear-input'
              } else {
                resetElem.className = 'clear-input hide'
              }
              oldHasValue = hasValue;
            }
          }

          searchWordElem.addEventListener('input', function () {
            var value = this.value.replace(/^\s+|\s+$/g, '');
            setInputState(!!value);
            getSuggestion(value);
          });

          resetElem.addEventListener('click', function (e) {
            setInputState(false);
            setTimeout(function () {
              searchWordElem.focus();
            }, 0);
          });
          cancelElem.addEventListener('click', function () {
            showMap();
          });

          listWrapElem.addEventListener('click', function (e) {
            var target = e.target;
            for (; target && target !== listWrapElem; target =
              target.parentNode) {
              if (target.className === 'active-pos' || target.tagName ===
                'LI') {
                var lastActiveElem = listWrapElem.querySelector(
                  'i.active');
                if (lastActiveElem) {
                  lastActiveElem.className = '';
                }
                if (target.className === 'active-pos') {
                  target = target.children[0]
                }
                target.querySelector('i').className = 'active';
                loc = {
                  poiname: target.getAttribute('data-name'),
                  poiaddress: target.getAttribute(
                    'data-address'),
                  latlng: {
                    lat: target.getAttribute(
                      'data-lat'),
                    lng: target.getAttribute(
                      'data-lng'),
                  }
                }
                if (nativeMarker) {
                  nativeMarker.setPoint(new plus.maps.Point(
                    loc.latlng.lng, loc.latlng.lat));
                }
                break;
              }
            }
          })


        });
      };
    </script>
  </body>

</html>